<template>
  <a-layout class="allLayout">
    <a-layout-content>
      <unit-table
        ref="approvalable"
        :columns="this.$staticMenu.hostListColumns"
        :size="pageSize"
        :sizeOptions="pageSizeOptions"
        :type="tableType"
        :url="tableUrl"
        rowKeyName="id"
        @onSelect="tableOnSelect"
      >
        <!-- 补充表格操作 -->
        <div slot='tableAct' class="actionBtn">
          <a-button type="primary" @click="addHost">
            <a-icon type="plus"/>
            添加
          </a-button>
          <a-button>
            <a-icon type="play-circle"/>
            启用
          </a-button>
          <a-button type="danger">
            <a-icon type="stop"/>
            禁用
          </a-button>
        </div>
        <!-- end -->
        <!-- 补充表格每行的操作 -->
        <span slot="tableRowAct" slot-scope="props">
					<a class="action" @click="editHost">
						修改
					</a>
					<a-divider type="vertical"/>
					<a class="action">
						删除
					</a>
					<a-divider type="vertical"/>
					<a class="action" @click="manageMonitor">
						管理监控项
					</a>
					<a-divider type="vertical"/>
					<a class="action">
						管理告警项
					</a>
				</span>
      </unit-table>
      <modal
        ref="hostModalForm"
        :title="modalTitle"
        :visible="modalVisible"
        @cancel="handleCancel"
        @ok="handleOk"
      >
      </modal>
    </a-layout-content>
  </a-layout>
</template>

<script>
  import {GETAPPROVALLIST} from '@/../static/js/apis.js'
  import unitTable from "@/common/table"
  import modal from "./components/hostModal"

  export default {
    name: 'approval',
    components: {
      unitTable,
      modal
    },
    data() {
      return {
        tableSelectedKeys: [],
        tableUrl: GETAPPROVALLIST.url,  //调用表格组件，必须参数，后台数据接口
        tableType: GETAPPROVALLIST.type,  //调用表格组件，必须参数，后台方法方法（get，post）
        pageSize: 15,
        pageSizeOptions: ['15', '20', '40'],
        /*modal参数*/
        modalTitle: '',     //modal标题
        modalVisible: false,    //modal关闭打开控制器
      }
    },
    methods: {
      /*表格checkbox选中事件*/
      tableOnSelect(selectedRowKeys, selectedRows) {
        this.tableSelectedKeys = selectedRowKeys
      },
      addHost() {
        this.modalTitle = "添加主机"
        this.modalVisible = true
      },
      editHost() {
        this.modalTitle = "修改主机"
        this.modalVisible = true
      },
      manageMonitor() {
        this.$router.push({path: '/manageMonitor', query: {system: '监控管理'}})
      },
      /*modal确定事件*/
      handleOk(e) {
        this.modalVisible = false
      },
      /*modal取消事件*/
      handleCancel(e) {
        this.modalVisible = false
      }

    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .allLayout {
    margin: 30px;
  }

  .ant-layout-content {
    background-color: white;
  }

  .actionBtn button:not(:last-child),
  .ant-row button:not(:last-child) {
    margin-right: 20px;
  }

  .action {
    color: #1890ff
  }
</style>
